
<script setup lang="ts">
// 不设置默认值
// const res=defineProps<{
// name:string
// age?:number
// male:boolean
// }>()
const res=withDefaults(defineProps<{
name?:string
age?:number
male?:boolean
}>(),{
name:'rose',
age:18,
male:false
}
)
</script>

<template>
  <div>
    <h2>子组件</h2>

    <!-- props定义的数据，子组件的结构中可以直接使用，不需要用props点出来 -->
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>{{ male }}</p>
  </div>
</template>

<style scoped>
.div{
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
</style>